<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>首页</title>
		<base href="../../../" />
		<script src="lib/function/responsive.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="static/css/api.css" />
		<style>
			body{padding-top:1.5rem;height:100%;}
			#header{
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				background-color: #fff;
				z-index: 99;
				box-shadow: 0 0 10px 3px
				rgba(205, 205, 205, 0.45);
				/* box-shadow: 0rem 0rem 0.17rem 0.04rem
				rgba(205, 205, 205, 0.45); */
			}
			#header .header-box{
				display: flex;
				justify-content: space-between;
				height: 1.06rem;
			}
			#header .return{
				width: 1.7rem;
				height: 1.06rem;
				line-height: 1.06rem;
				box-sizing: border-box;
				padding-left: 0.65rem;
				font-size: 0.22rem;
				color: #333333;
				white-space: nowrap;
				/* background: url(static/icon/back.png) no-repeat left 0.3rem center; */
				background-size: 0.18rem;
				font-size: 0.26rem;
			}
			#header .return span{
				color: #757575;
				font-size: 0.26rem;
			}
			#header .return:active,#header .home:active{
				opacity: 0.6;
			}
			#header .name{
				line-height: 1.06rem;
				font-size: 0.28rem;
				font-weight: bold;
				color: #333333;
			}
			#header .home{
				width: 1.7rem;
				height: 1.06rem;
				/* background: url(static/icon/home.png) no-repeat right 0.3rem center;
				background-size: 0.44rem; */
				text-align: right;
				padding-right: 0.3rem;
			}
			#header .home span{
				display: inline-block;
				min-width: 1.01rem;
				height: 0.48rem;
				line-height: 0.48rem;
				margin-top: 0.26rem;
				font-size: 0.18rem;
				color: #757575;
				background: url(static/icon/exit.png) no-repeat left 0.2rem center;
				background-size:0.18rem;
				background-color: #efefef;
				border-radius: 0.1rem;
				padding-left: 0.48rem;
				padding-right: 0.2rem;
				white-space: nowrap;
				box-sizing: border-box;
			}
			.index{
				overflow: hidden;
				padding: 0 0.3rem 0.3rem;
			}
			.index .title{
				font-family: MicrosoftYaHei;
				font-size: 0.23rem;
				font-weight: bold;
				color: #333333;
				padding-left: 0.27rem;
				line-height: 0.8rem;
				position: relative;
			}
			.index  .more-btn{
				line-height: 0.8rem;
				float: right;
				min-width: 0.8rem;
				text-align: right;
				color: #686868 !important;
				font-size: 0.22rem;
			}
			.index  .more-btn:active{
				opacity: 0.8;
			}
			.index .title::before{
				position: absolute;
				content: '';
				top: 0.28rem;
				left: 0;
				width: 0.06rem;
				height: 0.25rem;
				background-color: #2691ff;
				border-radius: 0.03rem;
			}
			.index-left {
				float: left;
				width: 14.4rem;
			}
			.index-left .index-video{
				width: 14.4rem;
				height: 6rem;
				background-color: #000000;
			}
			.index-left .index-video video{
				width: 100%;
				height: 100%;
			}
			.index-left .nav-tab{
				width: 14.41rem;
				height: 0.8rem;
				background-color:rgba(38,145,255,0.07);
			}
			.index-left .nav-tab li{
				float: left;
				font-size: 0.2rem;
				line-height: 0.8rem;
				padding: 0 0.4rem;
				margin-right: 0.1rem;
				color: #262626;
			}
			.index-left .nav-tab .active{
				color: #2691ff;
				position: relative;
			}
			.index-left .nav-tab .active::after{
				content: '';
				position: absolute;
				width: 0.62rem;
				height: 0.04rem;
				background-color: #2691ff;
				left: 50%;
				margin-left: -0.31rem;
				bottom: 0.1rem;
			}
			.index-left .box-con{
				padding: 0.3rem 0 0;
				height: 5.1rem;
				overflow-y: auto;
				margin-bottom: 0.2rem;
			}
			.index-left .box-lis{
				margin-bottom: 0.23rem;
				padding-left: 1.6rem;
				position: relative;
				line-height: 0.3rem;
				font-size: 0.2rem;
			}
			.index-left .box-lis:last-child{
				margin-bottom: 0;
			}
			.index-left .box-lis .name{
				width: 1.6rem;
				left: 0;
				position: absolute;
				color: #2691ff;
				text-align: right;
			}
			.index-left .box-lis .text{
				color: #686868;
			}
			/* 右侧 */
			.index-right{
				float: right;
				width: 4rem;
				margin-top: 0.1rem;
			}
			.index-right .section{
				width: 4rem;
				min-height: 6.66rem;
				margin-bottom: 0.3rem;
				background-color: #f6f6f6;
				padding:0 0.25rem  ;
				box-sizing: border-box;
			}
			.index-right .section ul{
				padding-left: 0.5rem;
			}
			.index-right .section li{
				line-height: 0.8rem;
				font-size: 0.18rem;
				color: #262626;
				position: relative;
				display: flex;
				justify-content: space-between;
				position: relative;
				align-items: center;
			}
			.index-right .section li::before{
				position: absolute;
				content: '';
				width: 6px;
				height: 6px;
				border-radius: 50%;
				background-color: #8cc34c;
				left: -10px;
				top: 50%;
				margin-top: -3px;
			}
			.index-right .section li i{
				display: inline-block;
				background-color: #8cc34c;
				border-radius: 0.04rem;
				font-size: 0.15rem;
				height: 0.3rem;
				line-height: 0.3rem;
				padding: 0 0.1rem;
				color: #ffffff;
				vertical-align: middle;
				
			}
			.index-right .status1 i{}
			.index-right .status1 {}
			.index-right .section .status2 i{
				background-color: #fb6f3d;
			}
			.index-right .section .status2::before{
				background-color: #fb6f3d;
			}
			.index-right .section .status3::before{
				background-color: #27e0fb;
			}
			.index-right .section  .status3 i{
				background-color: #27e0fb;
			}
			.index-right .history:active{
				opacity: 0.6;
			}
			.index-right .history{
				width: 2.01rem;
				height: 0.58rem;
				background-color: #2691ff;
				box-shadow: 0.02rem 0.02rem 0.11rem 0.03rem 
					rgba(57, 141, 227, 0.52);
				border-radius: 0.1rem;
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 0.2rem auto 0.3rem;
				font-size: 0.18rem;
				color: #ffffff;
			}
			.index-right .name{
				padding: 0.58rem 0.2rem;
			}
			.index-right .name img{
				display: inline-block;
				width: 1rem;
				height: 1rem;
				background-color: #2691ff;
				border-radius: 50%;
				vertical-align: middle;
			}
			.index-right .name .txt{
				display: inline-block;
				vertical-align: middle;
				margin-left: 0.2rem;
				
			}
			.index-right .name .name{
				padding: 0;
				margin:0 0  0.18rem 0;
				font-size: 0.22rem;
				color: #101010;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				max-width: 1.8rem;
			}
			.index-right .name .tel{
				font-size: 0.2rem;
				color: #9d9d9d;
			}
			.index-right .test{
				text-align: center;
				padding-top: 0.6rem;
				font-size: 0.2rem;
				color: #9d9d9d;
				position: relative;
			}
			.index-right .test::before{
				position: absolute;
				content: '';
				left: 0rem;
				right: 0rem;
				top: 0;
				height: 1px;
				border-top: 1px dashed #9d9d9d;
			}
			.index-right .test span{
				color: #131313;
			}
			/* 弹窗 */
			.index-tc,.equipment{
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0,0,0,0.5);
				z-index: 99;
			}
			.index-tc-box,.equipment-box{
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.index-tc .index-con{
				width: 4.39rem;
				height: 3.4rem;
				background-color: #ffffff;
				border-radius: 0.1rem;
			}
			.index-tc .txt{
				text-align: center;
				padding-top: 1.57rem;
				background: url(static/icon/warning.png) no-repeat top 0.45rem  center;
				background-size: 0.98rem;
				font-size: 0.26rem;
				color: #101010;
			}
			.index-tc .index-btn{
				display: flex;
				justify-content: space-between;
				padding:0.5rem 0.8rem 0;
			}
			.index-tc .index-btn span{
				display: inline-block;
				width: 1.15rem;
				height: 0.58rem;
				background-color: #2691ff;
				box-shadow: 0.02rem 0.02rem 0.11rem 0.03rem 
					rgba(57, 141, 227, 0.52);
				border-radius: 0.1rem;
				text-align: center;
				line-height: 0.58rem;
				font-size: 0.18rem;
					color: #ffffff;
			}
			.index-tc .index-btn span:active{
				opacity: 0.6;
			}
			.index-tc .index-btn .close{
				background-image: linear-gradient(
					#dcdcdc, 
					#dcdcdc), 
				linear-gradient(
					#2691ff, 
					#2691ff);
				background-blend-mode: normal, 
					normal;
				box-shadow: 0.02rem 0.02rem 0.11rem 0.03rem 
					rgba(191, 191, 191, 0.52);
				color: #929292;
			}
			/* 获取设备列表弹窗 */
			.equipment-con{
				width: 6rem;
				height: 5rem;
				background-color: #ffffff;
				border-radius: 0.1rem;
				position: relative;
			}
			.close-equipment{
				position: absolute;
				right: 0;
				top: 0;
				background-color: #00AA00;
				width: 0.8rem;
				height: 0.8rem;
				background: url(static/icon/close.png) no-repeat  center;
				background-size: 0.3rem;
				z-index: 999999;
			}
			.equipment-top{
				text-align: center;
				font-size: 0.3rem;
				line-height: 0.8rem;
				position: relative;
			}
			.equipment-lis-box{
				height: 3.4rem;
				overflow-y: auto;
			}
			.equipment-lis-box .equipment-lis{
				padding: 0.2rem;
				position: relative;
			}
			.equipment-lis-box .equipment-lis::after,.equipment-top::after{
				content: '';
				height: 1px;
				width: 100%;
				background-color: #ccc;
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				transform: scale(1,0.5);
			}
			/* .equipment-lis-box .equipment-lis:last-child::after{
				height: 0;
			} */
			.reset-btn{
				text-align: center;
			}
			.reset-btn span{
				display: inline-block;
				padding: 0.12rem 0.3rem;
				background-color: #2691ff;
				border-radius: 0.1rem;
				margin-top: 0.1rem;
				color: #fff;
			}
			.equipment-load{
				position: absolute;
				top: 0;
				width: 100%;
				height: 100%;
				left: 0;
				display: none;
				justify-content: center;
				align-items: center;
				background-color: rgba(0,0,0,0.1);
				z-index: 9999;
			}
			.equipment-load img{
				width: 1.2rem;
			}
			.equipment-load-show .equipment-load{
				display: flex;
			}
			.equipment-load-show .reset-btn{
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="header">
			<div class="header-box">
				<div i18n="equipment" class="return device">设备：<span>请选择</span></div>
				<div i18n="home.page" class="name">首页</div>
				<div class="home exitBtn">
					<span  i18n="sign.out">退出</span>
				</div>
			</div>
		</div>
		<div class="index">
			<div class="index-left">
				<div class="title"  i18n="assessment.criteria">考核标准</div>
				<div class="nav-tab">
					<ul id="nav-box">
						<!-- <li class="active">镜下识别</li>
						<li>夹持训练</li>
						<li>定位摆放</li>
						<li>穿钍引线</li>
						<li>剪切训练</li> -->
					</ul>
				</div>
				<div class="box-con">
					<!-- <div class="box-lis">
						<div class="name">考官指令：</div>
						<div class="text">请您首先仔细阅读第1题的试题卡，按要求完成考试。考前准备时间为2分钟，正式考试时间为1 分钟， 请注意合理分配时间。</div>
					</div>
					<div class="box-lis">
						<div class="name">综合评价：</div>
						<div class="text">根据考生完成全部所需时间和完成技术要求综合评定，总分为100分。</div>
					</div>
					<div class="box-lis">
						<div class="name">操作时间评价：</div>
						<div class="text">根据考生完成全部操作所需时间进行评分：≤30秒（15分）；31~40秒（12分）；41~50秒（8分）；51~60秒（5分）； >60秒（0分）</div>
					</div>
					<div class="box-lis">
						<div class="name">操作质量评价：</div>
						<div class="text"><p>1.正确选择操作器械（应当选择手持φ10mm腹腔镜×1，φ5mm抓钳×1）</p>
						<p>2.腔体内设1个起始键，和由A~E共5个标记点，点击起始键后开始计时，识别标记点并通过检测后自动结束</p>
						<p>3.双手配合操作，一手持腹腔镜，另一手持抓钳，首先使用腹腔镜引导找到起始点，同时使用抓钳钳头触碰起始点计时开始，然后腹腔镜引导找到标记点，同时使用</p>
						<p>抓钳钳头触碰标记点，检测通过后为完成1次识别，按顺序由A至E，完成识别通过后自动结束核算分数</p></div>
					</div> -->
				</div>
				<div class="title">
					<span i18n="teaching.video">教学视频</span>
					<div i18n="more" class="more-btn openPage" data-url = "index_videolist"  data-index = "1">更多&gt;&gt;</div>
				</div>
				<div class="index-video">
					
				</div>
			</div>
			<div class="index-right">
				<div class="section">
					<div class="name" id="user">
						<!-- <img src="static/images/img1.jpg" alt="">
						<div class="txt">
							<div class="name">张三</div>
							<div class="tel">18780038687</div>
						</div> -->
					</div>
					<div class="test">
						<!-- 考试科目: <span> 镜下识别</span> -->
					</div>
					<div i18n="go.exam" class="history openPage" data-url = "index_test" data-index = "3" data-type = "test">去考试</div>
					<div i18n="to.train" class="history openPage" data-url = "index_test" data-index = "3" data-type = "train">去训练</div>
				</div>
				<div class="section">
					<div i18n="latest.exam" class="title">最新考试</div>
					<ul id="test-box">
						<!-- <li class="status1">
							<span>镜下识别</span>
							<i>已通过</i>
						</li> -->
					</ul>
					<div i18n="view.historical.results" class="history openPage" data-url = "index_history"  data-index = "2">查看历史成绩</div>
				</div>
			</div>
			<!-- 退出弹窗 -->
			<div class="index-tc hidden">
				<div class="index-tc-box">
					<div class="index-con">
						<div i18n="sure.exit" class="txt">是否确认要退出！</div>
						<div class="index-btn">
							<span i18n="confirm" class="ok" id="exitBtn">确认</span>
							<span i18n="cancel" class="close">取消</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 设备选择 -->
		<div class="equipment hidden">
			<div class="equipment-box">
				<div class="equipment-con">
					<div class="close-equipment"></div>
					<div i18n="please.select.equipment" class="equipment-top">请选择设备</div>
					<div class="equipment-lis-box">
						<!-- <div class="equipment-lis">设备1</div>
						<div class="equipment-lis">设备2</div>
						<div class="equipment-lis">设备3</div>
						<div class="equipment-lis">设备3</div>
						<div class="equipment-lis">设备3</div>
						<div class="equipment-lis">设备3</div> -->
					</div>
					<div i18n="search.again" class="reset-btn"><span>重新搜索</span></div>
					<!-- 搜索动画 -->
					<div class="equipment-load">
						<img src="static/icon/loading_more.gif" >
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="runtime/pub.js"></script>
		<script src="dist/i18n.js"></script>
		<script type="text/javascript" src="runtime/index/main.js"></script>
	</body>
</html>
